<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018-05-08
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/table/bootstrap-table.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/table/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.css">
    <script type="text/javascript">
        <%--单击查询按钮执行的方法--%>
        function query() {
            var tableInfo=$("#table").bootstrapTable("getOptions");
            var name=$("#name").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/User/GetAll",
                data:{"name":name,"pageSize":tableInfo.pageSize,"pageNumber":tableInfo.pageNumber},
                dataType:"json",
                success:function (data) {
                    $("#table").bootstrapTable("load",data);
                }
                }
            )
        }
        function queryParams(params){
                var temp={
                    pageSize:params.pageSize,
                    pageNumber:params.pageNumber,
                    name:$("#name").val()
                }
                return temp;
        }
        $(function () {
            $("#table").bootstrapTable({
                url:"${pageContext.request.contextPath}/User/GetAll",
                pagination:true,
                queryParams:queryParams,
                queryParamsType:'',
                columns:[{
                    field:"uid",
                    title:"编号"
                },{
                    field:"uname",
                    title:"用户名"
                },{
                    field:"upwd",
                    title:"密码"
                },{
                    field:"NickName",
                    title:"昵称"
                },{
                    field:"phone",
                    title:"电话"
                },{
                    field:"image",
                    title:"头像"
                },{
                    field:"isLogin",
                    title:"是否可用",
                    formatter:function (value,row,index) {
                        return row.isLogin==1?"可用":"不可用";
                    }
                }],
                pageList:[5,10,15],
                pageSize:5,
                pageNumber:1,
                pagination:true,
                sidePagination:'server'
               /* onExpandRow: function (index, row, $detail) {
                    var uid=row.uid;
                    var tow_table=$detail.html("<table></table>").find("#table");
                    $(tow_table).bootstrapTable({
                    })
                }*/
            })
        });
    </script>
</head>
<body>
<div style="margin-bottom: -12px">
    <form>
        <table align="right">
            <tr>
                <td><input type="text" id="name" name="name"></td>
                <td><input type="button" value="查询" onclick="query()"></td>
            </tr>
        </table>
    </form>
</div>
<table id="table"></table>
</body>
</html>
